<template>
  <view class="goods_detail-container ">
    <view class="page_bg_FAFAFA">
      <scroll-view scroll-y="true" >
        <view class="goods-img bottom_20">
          <image class="img" :src="`https://www.worldintek.com:39011/yaolexue-service/${goodsInfo.imageCoverDto.compressLink}`" mode="widthFix"></image>
        </view>
        <view class="home_container">
          <view class="goods-info bottom_20">
            <view class="goods-title">
              {{goodsInfo.productName}}
            </view>
            <view class="goods-price">
              <image class="img" src="https://www.worldintek.com:39011/yaolexue-service/icon_xuefen.png" mode=""></image>
              {{goodsInfo.price}} 
            </view>
          </view>
          <view class="explain-box bottom_20">
            <view class="explain-title">
              兑换说明
            </view>
            <view class="explain-text" v-html="goodsInfo.contentText">
              
            </view>
          </view>
          <view class="imgs">
                            <image class="img" :src="`https://www.worldintek.com:39011/yaolexue-service/${goodsInfo.imageCoverDto.compressLink}`"  mode=""></image>
          </view>
        </view>
        
      </scroll-view>
    </view>
    <view class="btn-bg">
      <button class="btn" @click="creditExChange">学分兑换</button>
    </view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goodsId: '',
        goodsInfo: {},
        totalScore: 0,
        expendScore: 0,
        stock: 0,
        address: {}
      };
    },
    onLoad(options) {
      this.goodsId = options.id
      this.getGoodsDetail()
      this.totalScore = uni.getStorageSync('userInfo').score
      console.log(this.totalScore);
    },
    methods: {
     async getGoodsDetail() {
        const res = await this.$http.get(`/yaolexue-service-portal/product/productInfo/${this.goodsId}`)
        this.goodsInfo = res.data
        this.expendScore = res.data.price
        uni.setStorageSync('goodsInfo', res.data)
        this.stock = res.data.stock
        console.log('getGoodsDetail', this.stock);
      },
      creditExChange() {
      if (this.stock === null || (this.stock > 0 && this.totalScore - this.expendScore >= 0)) {
          // 库存不受限制或学分充足，进行学分兑换
          uni.navigateTo({
            url: '/subPages/orderDetail/orderDetail'
          });
        } else if (this.stock <= 0) {
          // 库存不足，给出提示
          uni.showToast({
            title: '库存不足',
            icon: 'none'
          });
        } else {
          // 学分不足，给出提示
          uni.showToast({
            title: '学分不足，请充值!',
            icon: 'none'
          });
        }
        
      }
    }
  }
</script>

<style lang="scss">
.goods_detail-container {
  
  display: flex;
  flex-direction: column;
  .bottom_20 {
    margin-bottom: 20rpx !important;
    // background-color: red;
  }
  
  .goods-img {
    background: #FFFFFF;
    .img {
      width: 750rpx;
      height: 404rpx;
      // margin: 0 171rpx 48rpx 151rpx;
    }
  }
  .goods-info {
    width: 689rpx;
    height: 152rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    display: block;
    overflow: hidden;
    .goods-title {
      margin: 25rpx 0 18rpx 20rpx;
    }
    .goods-price {
      display: flex;
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #FA312A;
      .img {
        width: 45rpx;
        height: 44rpx;
        margin: 0 11rpx 0 18rpx;
      }
      
    }
  }
  .explain-box {
    width: 689rpx;
    height: 100%;
    background: #FFFFFF;
    border-radius: 10rpx;
    display: block;
    overflow: hidden;
    .explain-title {
      margin: 25rpx 0 26rpx 21rpx;
    }
    .explain-text {
      width: 638rpx;
      font-size: 26rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
      line-height: 49rpx;
      margin-left: 21rpx;
    }
  }
  
  .imgs {
    .img {
      width: 685rpx;
    }
    
  }
  .btn-bg {
    position: sticky;
    bottom: 0;
    z-index: 999;
    background-color: #FFFFFF;
    width: 100%;
    height: 100rpx;
    .btn {
      margin-left: 60rpx;
      margin-top: 11rpx;
      width: 631rpx;
      height: 78rpx;
      background: #FA312A;
      border-radius: 10rpx;
      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
     
    }
  }
  
}
</style>
